<template>

  <div class="tab_nav_bg" >
    <div  class="flex_center">
      <van-icon name="arrow-left" class="nav_left_icon" @click="$router.go(-1)"  size="18px"/>
      <div style="flex: 1;text-align: center">{{$t('账号注销')}}</div>
    </div>
  </div>
  <div class="wrapper">
    <div v-if="!isCodeShow" class="content_text">
      <div class="content_box">
        <p p style="font-weight: 600">Apply for account cancellation</p>
        <p style="color: #666666">To protect your account and information and ensure the absence of financial
          disputes, please make sure you
          are aware of the following provisions before applying:</p>
        <p style="font-weight: 600">1. All loans must be fully repaid.</p>
        <p style="color: #666666">In your account, all loan records must be fully settled, and no new loan applications
          should be pending; otherwise, you cannot apply.</p>
        <p style="font-weight: 600">2. All rewards, coupons, and privileges will be forfeited and cannot be
          reclaimed.</p>
        <p style="font-weight: 600">3. After confirming the account cancellation, you can log in again within 15 days.
          By logging in again, we consider that you have abandoned the account cancellation process.</p>
        <p style="font-weight: 600">4. When logging in again using the phone number after the account cancellation, we
          will create a new account.</p>
      </div>
      <div class="confirm_btn">
        <van-button @click="next()" :disabled="countdownNum > 0" round style="width: 100%" type="primary">
          <div v-show="countdownNum > 0">{{ countdownNum }}s</div>
          <div v-show="countdownNum <= 0 ">{{ $t('下一步') }}</div>
        </van-button>
      </div>
    </div>
    <div v-else style="font-weight: 600">
      <p>For the security of your account, please enter the verification <code></code></p>
      <p>The verification code has been sent to <span style="color: #15B3B2">{{ phone }}</span></p>
      <div class="send_input">
        <input v-model="codeValue" class="input">
        <span style="color: #15B3B2">
          <span v-if="!sendCodeDisabled" @click="sendCode">{{ $t('验证码') }}</span>
          <span v-else>{{ codeNum }}s</span>
        </span>
      </div>
      <div style="margin-top: 30px;text-align: center">
        <van-button @click="confirmCode()" style="width: 80%" round type="primary">
          {{ $t('确认') }}
        </van-button>
      </div>
    </div>
  </div>
</template>

<script>
import {useStore} from "vuex";
import {loginOut, upLoadPoint,} from '@/api/my'
import {onMounted, ref} from "vue";
import {debounce} from "@/utils/tool";
import {Toast} from "vant";
import {apiSendCode} from "@/api/login";
import {useI18n} from 'vue-i18n'
import {Dialog} from 'vant'
import router from "@/router";
import {fetchMyLoanRecord} from "@/api/order";

export default {
  name: "index",
  setup() {
    const store = useStore()
    const {t} = useI18n()
    const countdownNum = ref(30)
    const timer = ref(null)
    const isCodeShow = ref(false)
    const sendCodeDisabled = ref(false)
    const codeTimer = ref(null)
    const codeNum = ref(60)
    const phone = localStorage.getItem('phone')
    const loanProductName = localStorage.getItem('productName')
    const codeValue = ref('')
    const token = localStorage.getItem('token')
    const myOrderList = ref([])

    function next() {
      if (myOrderList.value.length && !myOrderList.value.some(v => {
        return [-1,2,9].indexOf(v.approvalResult) !== -1
      })) {
        return Toast(t('您当前还有未结清订单,请结清后再注销!'))
      }
      isCodeShow.value = true
      upLoadPoint({type: 6})
    }

    //发送验证码
    const sendCode = debounce(
        async () => {
          const res = await apiSendCode({
            smsType: '1',
            phone: phone,
            loanProductName: loanProductName
          })
          if (res.code === 1) {
            sendCodeDisabled.value = true
            codeTimer.value = setInterval(() => {
              codeNum.value--
              if (codeNum.value === 0) {
                clearInterval(codeTimer.value)
                sendCodeDisabled.value = false
                codeNum.value = 60
              }
            }, 1000)
          }
        }
    )

    function confirmCode() {
      if (!codeValue.value) return Toast(t('请输入验证码'))
      Dialog.alert({
        title: 'Account successfully closed',
        message: 'We will process your request and delete the account information within 30 days. When logging in again using the phone number after the account closure, a new account will be created.',
      }).then(async () => {
        const res = await loginOut()
        if (res.code === 1) {
          const indexArr = ['phone', 'userId', 'loanInfo', 'token', 'userWriteInfo', 'userInfoVerify', 'orderId', 'homeProductList', 'loanInfo', 'productInfo']
          indexArr.forEach(item => {
            localStorage.removeItem(item)
          })
          upLoadPoint({type: 7})
          if (window.android) {
            window.android.exitAccount(true)
          }
          router.replace('/hScmlvxSUkDQ/UjRzDSClllpS')
        }
      });
    }

    //(-1订单关闭,0,待审核1,审核中,2,拒绝,5,待放款,6待还款,8,逾期,9结清)
    const fetchLoanOrder = async () => {
      const res = await fetchMyLoanRecord({type: 0})
      if (res.code === 1) {
        myOrderList.value = res.data
      }
    }
    onMounted(() => {
      timer.value = setInterval(() => {
        countdownNum.value--
        if (countdownNum.value === 0) {
          clearInterval(timer.value)
        }
      }, 1000)
      if (token) {
        fetchLoanOrder()
      }
      // 清除loading
      store.dispatch('changeLoading', false)
    })
    return {
      next,
      confirmCode,
      sendCode,
      isCodeShow,
      phone,
      countdownNum,
      sendCodeDisabled,
      codeNum,
      codeValue
    }
  }
}
</script>

<style scoped>
.wrapper {
  padding: 20px;
  font-size: 16px;
  margin-top: -150px;
  background-color: #F7F7F7;
}

.content_text {
  text-align: center;
  font-size: 12px;
}

.content_box {
  box-sizing: border-box;
  padding: 15px;
  background-color: #FFFFFF;
  border-radius: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
  text-align: left;
  font-size: 18px;
}

.confirm_btn {
  margin: 30px 0;
  width: 100%;
  text-align: center;
}

.send_input {
  border: 1px solid #EEEEEE;
  border-radius: 12px;
  padding: 10px 15px;
  box-sizing: border-box;
  background-color: #fff;
  font-size: 14px;
  text-align: right;
}

.send_input .input {
  border: 0;
  float: left;
}
</style>